﻿@page "/tags"

<h3>Tag 标签</h3>

<h4>用于标记和选择。</h4>

<Block Title="基本用法" Introduction="页面中的非浮层元素，不会自动消失。">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary">标签一</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary">标签二</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success">标签三</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger">标签四</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning">标签五</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info">标签六</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark">标签七</Tag>
            </div>
        </div>
</Block>

<Block Title="关闭按钮" Introduction="提供关闭按钮的标签">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="@DismissClick">标签一</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary" ShowDismiss="true" OnDismiss="@DismissClick">标签二</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">标签三</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger" ShowDismiss="true" OnDismiss="@DismissClick">标签四</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning" ShowDismiss="true" OnDismiss="@DismissClick">标签五</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info" ShowDismiss="true" OnDismiss="@DismissClick">标签六</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark" ShowDismiss="true" OnDismiss="@DismissClick">标签七</Tag>
            </div>
        </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="带 Icon" Introduction="表示某种状态时提升可读性。">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success">标签一</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-warning" Color="Color.Warning">标签二</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-question-circle" Color="Color.Info">标签三</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-times-circle" Color="Color.Danger">标签四</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-angle-left" Color="Color.Primary">标签五</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-user" Color="Color.Dark">标签六</Tag>
            </div>
        </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
